<template>
  <div class="outline-wrapper" style="height: 100%">
    <PptHeader title="智能大纲"></PptHeader>
    <div class="outline-content">
      <div class="outline-choose-item">
        <div class="choose-item" @click="changeRenderCom(1)">
          <div class="btn-icon">
            <el-icon> <AIAvatar /> </el-icon>
          </div>
          <div>AI 智能生成</div>
        </div>
        <div class="choose-item" @click="changeRenderCom(2)">
          <div class="btn-icon next">PPT</div>
          <div>导入文件</div>
        </div>
      </div>
      <div class="outline-input">
        <component :is="renderCom" @onSend="onSend"></component>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { shallowRef, type Component, onMounted } from 'vue'
import PptHeader from '../PptHeader.vue'
import Generate from './generate.vue'
import UploadFile from './uploadFile.vue'
import { useRouter, type Router, useRoute } from 'vue-router'
import AIAvatar from '@/icons/AIAvatar.vue'
import { pptFileContentKey, pptFileIdKey, pptThemeInputKey } from '@/views/ai-pptx/ppt-helpers'
const renderCom = shallowRef<Component>(Generate)
const router: Router = useRouter()
const route = useRoute()
const mapCom: Record<string, Component> = {
  1: Generate,
  2: UploadFile,
}
const changeRenderCom = (value: number) => {
  renderCom.value = mapCom[value]
}

const onSend = () => {
  router.replace({
    path: '/ai-ppt/create/outline',
    query: route.query.tid ? {tid: route.query.tid} : {}
  })
}

onMounted(() => {
  const fileContent = window.sessionStorage.getItem(pptFileContentKey.value)
  const fileId = window.sessionStorage.getItem(pptFileIdKey.value)
  if (fileContent || fileId) {
    window.sessionStorage.removeItem(pptThemeInputKey.value)
    changeRenderCom(2)
  } else {
    window.sessionStorage.removeItem(pptFileIdKey.value)
    window.sessionStorage.removeItem(pptFileContentKey.value)
    changeRenderCom(1)
  }
})
</script>
<style scoped lang="scss">
.outline-content {
  padding: 20px;
  height: calc(100% - 100px);
  max-width: 1000px;
  min-width: 800px;
  margin: 0 auto;
  .outline-choose-item {
    display: flex;
    justify-content: space-evenly;
    .choose-item {
      width: 300px;
      height: 150px;
      border-radius: 20px;
      background-color: rgba($color: #fff, $alpha: 0.5);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      cursor: pointer;
      box-shadow: var(--el-box-shadow);
      &:hover {
        border: 1px solid var(--el-border-color);
      }
      .btn-icon {
        background: rgba(66, 136, 216, 0.6);
        width: 70px;
        height: 70px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 38px;
        color: rgba(255, 255, 255, 0.6);
        &.next {
          border-radius: 6px;
          font-size: 36px;
        }
      }
    }
  }
  .outline-input {
    margin-top: 20px;
    // padding: 20px;
    // overflow: hidden;
    // background: rgba(255, 255, 255, 0.6);
    // box-shadow: var(--el-box-shadow);
    // width: 100%;
    // border-radius: 20px;
    // height: calc(100% - 150px);
  }
}
</style>
